<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <!-- 顶部搜索 -->
    <el-card>
      <el-form
        :inline="true"
        :model="selectForm"
        class="demo-form-inline"
      >
        <el-form-item label="车辆类型：">
          <el-select
            v-model="selectForm.truckTypeId"
            placeholder="车辆类型"
            style="width: 300px;"
          >
            <el-option
              v-for="(item, index) in trunkTypeArr"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码:">
          <el-input
            v-model="selectForm.licensePlate"
            placeholder="请输入车型编号"
            style="width: 300px;"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="danger"
            @click="handleSelect"
          >搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 列表渲染 -->
    <el-card style="margin-bottom:55px">
      <el-button
        type="danger"
        style="margin: 10px 0 20px 0;"
        @click="dialogVisible = true"
      >新增车型</el-button>
      <el-table
        :data="trunkList"
        stripe
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="65"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="licensePlate"
          label="车辆号码"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="truckTypeName"
          label="车辆类型"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="driverNum"
          label="司机数量"
        >
        </el-table-column>
        <el-table-column
          prop="workStatus"
          label="车辆状态"
          :formatter="formatWorkStatus"
        >
        </el-table-column>
        <el-table-column
          prop="deviceGpsId"
          label="GPS设备id"
        >
        </el-table-column>
        <el-table-column
          prop="allowableLoad"
          label="实载重量"
        >
        </el-table-column>
        <el-table-column
          prop="allowableVolume"
          label="实载体积"
        >
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="200"
        >
          <template #default="{ row }">
            <el-button
              type="text"
              @click="getDetail(row.id)"
            >查看详情</el-button>
            <div style="display: inline-block;vertical-align: middle;color:#E3E3E3">|</div>
            <el-button
              type="text"
              @click="handleStart(row)"
            >{{ row.workStatus === 0 ? '启用' : '停用' }}</el-button>
            <div style="display: inline-block;vertical-align: middle;color:#E3E3E3">|</div>
            <el-button
              type="text"
              @click="handleSetDriver(row.id)"
            >配置司机</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          :current-page="page"
          :page-sizes="[8, 10, 13, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 对话框 -->
    <el-dialog
      title="新增车辆"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>
        <el-form
          ref="dialogForm"
          :model="dialogForm"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item
            prop="truckTypeId"
            label="车辆类型"
            style="margin: 20px 20px;"
          >
            <el-select
              v-model="dialogForm.truckTypeId"
              placeholder="请选择车辆类型"
              style="width: 340px;"
            >
              <el-option
                v-for="(item, index) in trunkTypeArr"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="licensePlate"
            label="车牌号码"
            style="margin: 20px 20px;"
          >
            <el-input
              v-model="dialogForm.licensePlate"
              style="width: 340px;"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="deviceGpsId"
            label="GPS设备id"
            style="margin: 20px 20px;"
          >
            <el-input
              v-model="dialogForm.deviceGpsId"
              style="width: 340px;"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <div style="text-align:center; margin-bottom:10px">
          <el-button @click="handleClose">取 消</el-button>
          <el-button
            type="danger"
            @click="handleAdd"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>
    <!-- 启用车辆 -->
    <el-dialog
      :title="`确定要${carStatus}吗？`"
      :visible.sync="dialogVisible1"
      width="25%"
    >
      <span>
        <div v-if="carStatus === '启用'">
          <p style="text-align: left;color: #20232A;">车辆启用需满足以下条件：</p>
          <p style="text-align: left;color: #20232A;">1.车辆信息已完善 &nbsp; 2.绑定司机>=2,且有排班</p>
        </div>
        <div v-if="carStatus === '停用'">
          <p style="text-align: left;color: #20232A;">车辆启用需满足以下条件：</p>
          <p style="text-align: left;color: #20232A;">1.车辆当前无运输任务 &nbsp; 2.车辆无关联运输线路</p>
          <p
            style="text-align: left;color: #20232A;background: rgb(255 234 229);
border-radius: 8px;"
          >注：停用后司机将自动解除绑定</p>
        </div>
      </span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button
          type="danger"
          @click="confirmStart"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 配置司机 -->
    <el-dialog
      title="车辆配置"
      :visible.sync="dialogVisible2"
      width="25%"
    >
      <span>
        <div>
          <p style="text-align: left;color: #20232A;">车辆启用需满足以下条件：</p>
          <p style="text-align: left;color: #20232A;">1.车辆信息已完善 &nbsp; 2.车辆信息已完善</p>
        </div>
      </span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button
          type="danger"
          @click="setDriver"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 确认配置 -->
    <el-dialog
      title="司机配置"
      :visible.sync="dialogVisible3"
      width="30%"
    >
      <span>
        <div>
          <div
            class="msg"
            style="background-color: #F3F4F7 ;"
          >
            <ul class="ul">
              <li class="lis">
                <div>车牌号码 <span>{{ setDriverForm.licensePlate }}</span></div>
                <div>车型 <span>{{ setDriverForm.truckTypeName }}</span></div>
              </li>
              <li class="lis">
                <div>车辆状态 <span>{{ setDriverForm.status === '0' ? '禁用' : '可用' }}</span></div>
                <div>实载重量 <span>{{ setDriverForm.allowableLoad }}吨</span></div>
              </li>
              <li class="lis">
                <div>实载体积 <span>{{ setDriverForm.allowableVolume }}m³</span></div>
                <div></div>
              </li>
            </ul>
          </div>
          <div style="display:flex;margin-bottom:20px">
            <div style="width: 100px;line-height:40px">配置司机</div>
            <el-select
              v-model="value1"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in driver"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-table
              fit
              :data="list"
              stripe
              style="width: 100%"
            >
              <el-table-column
                type="index"
                label="序号"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="司机姓名"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
              >
                <template #default>
                  <div>
                    <el-button type="text">编辑</el-button>
                    <el-button type="text">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <div style="text-align: center;">
          <el-button @click="dialogVisible3 = false">取 消</el-button>
          <el-button
            type="danger"
            @click="confirmSet"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getTrunkListPageAPI, addTrunkAPI, startCarAPI, deactivatedCarAPI, getTrunkDetailAPI, getDriverAPI, setDriverAPI } from '@/api/vehicle'
import { getCarListAPI } from '@/api/carmodels'
export default {
  name: 'Vehicle',
  data() {
    return {
      trunkList: [],
      page: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      selectForm: {
        licensePlate: '',
        truckTypeId: ''
      },
      trunkTypeArr: [],
      dialogForm: {},
      rules: {
        truckTypeId: [
          { required: true, message: '车辆类型不能为空', trigger: 'change' }
        ],
        licensePlate: [
          { required: true, message: '车牌号码不能为空', trigger: 'change' }
        ],
        deviceGpsId: [
          { required: true, message: 'GPS设备id不能为空', trigger: 'change' }]
      },
      carId: '', // 用来处理车辆启动和停用
      dialogVisible1: false, // 控制启用车辆弹窗
      carStatus: '启用', // 控制弹窗类型
      dialogVisible2: false, // 配置司机确认框
      dialogVisible3: false, // 确认配置
      setDriverForm: {}, // 配置司机
      driver: [
        { id: 1, name: '霄战' },
        { id: 2, name: '霄战1' }
      ], // 司机列表
      value1: [], // 选择框
      list: []
    }
  },
  watch: {
    value1: {
      deep: true,
      handler(newValue) {
        console.log(newValue)
        // this.list = []
        // newValue.forEach(item => {
        //   this.list.push({ name: item })
        // })
      }
    }
  },
  mounted() {
    this.getTrunkList()
    this.statsTrunk()
  },
  methods: {
    // 确认配置
    async confirmSet() {
      const res = await setDriverAPI({ truckId: this.carId, driverIds: this.list })
      console.log(res)
      this.dialogVisible3 = false
    },
    // 打开配置司机框
    handleSetDriver(id) {
      this.carId = id
      console.log(this.carId)
      this.dialogVisible2 = true
    },
    // 校验配置司机
    async setDriver() {
      const res = await getTrunkDetailAPI(this.carId)
      if (!res.data.truckLicenseId) return this.$message.error('车辆信息不完整')
      if (res.data.runStatus === 1) return this.$message.error('车辆正在运输中')
      this.setDriverForm = res.data
      this.dialogVisible3 = true
      const res1 = await getDriverAPI()
      this.driver = res1.data
      console.log(res1.data)
      this.dialogVisible2 = false
    },
    // 车辆的启用功能 打开弹窗
    handleStart(row) {
      this.carId = row.id
      this.dialogVisible1 = true
      console.log(row)
      if (row.workStatus === 0) this.carStatus = '启用'
      if (row.workStatus === 1) this.carStatus = '停用'
    },
    // 确认启用停用
    async confirmStart() {
      if (this.carStatus === '启用') {
        const res = await startCarAPI(this.carId)
        console.log(res)
        if (res.code === 1) return this.$message.error(res.msg)
        this.dialogVisible1 = false
        this.getTrunkList()
      }
      if (this.carStatus === '停用') {
        const res = await deactivatedCarAPI(this.carId)
        console.log(res)
        if (res.code === 1) return this.$message.error(res.msg)
        this.dialogVisible1 = false
        this.getTrunkList()
      }
    },
    // 查看详情
    getDetail(id) {
      console.log(id)
      this.$router.push({
        path: 'vehicle-detail',
        query: {
          id
        }
      })
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false
      this.dialogForm = {}
    },
    // 新增车辆
    async handleAdd() {
      console.log(this.dialogForm)
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          await addTrunkAPI(this.dialogForm)
          this.getTrunkList()
          this.handleClose()
        } else {
          this.$message.error('请补充内容')
        }
      })
    },
    // 统计车辆
    async statsTrunk() {
      const res = await getCarListAPI()
      this.trunkTypeArr = res.data
    },
    // 搜索
    handleSelect() {
      this.page = 1
      this.pageSize = 10
      this.getTrunkList()
    },
    // 重置
    handleReset() {
      this.page = 1
      this.pageSize = 10
      this.selectForm = {
        licensePlate: '',
        truckTypeId: ''
      }
      this.getTrunkList()
    },
    // 格式化-车辆状态
    formatWorkStatus(row) {
      const MAP = {
        0: '停用',
        1: '启用'
      }
      return MAP[row.workStatus]
    },
    // 获取车辆分页列表数据
    async getTrunkList() {
      const res = await getTrunkListPageAPI({ page: this.page, pageSize: this.pageSize, ...this.selectForm })
      this.total = Number(res.data.counts)
      console.log(res.data.items)
      this.trunkList = res.data.items
    },
    // pageSize变化时触发
    handleSizeChange(current) {
      console.log(this.pageSize, current)
      this.pageSize = current
      this.getTrunkList()
    },
    // currentPage 改变时会触发
    handleCurrentChange(current) {
      console.log(this.page, current)
      this.page = current
      this.getTrunkList()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.ul {
  padding: 0;
}
.lis {
  display: flex;
  justify-content: space-around;
  div {
    width: 40%;
    margin: 10px 0;
    text-align: left;
    color: #20232A;
    span {
      margin-left: 20px;
      color: #818693;
    }
  }
}
li {
  list-style: none;
}

::v-deep .el-card {
  margin: 15px 20px;
}
.block {
  text-align: center;
  margin-top: 30px;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.vehicle ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.vehicle {
  ::v-deep .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  ::v-deep .el-dialog__body {
    text-align: center;
    padding: 20px 20px 0px 20px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}
</style>

<style>
  .startconfirm{
    width: 481px;

    }
    .startconfirm .el-message-box__header{
      padding-bottom: 4px;
    }
    .startconfirm .el-message-box__container{
      margin-bottom: 15px;
    }
    .confirm .el-message-box__status.el-icon-warning{
      left: 70px;
    }
    .confirm.el-message-box__title{
      font-size: 16px;
    }
    .confirm .el-message-box__message p {
      color: #F92D2D;
      margin-top: 5px;
    }
    .confirm .el-message-box__btns{
      text-align: center;
      margin-top: 10px;
    }
</style>
